<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体验Vue.js的响应式</title>
</head>

<body>
  <div>
    <h2>Vue实例不会来管理：{{age}}</h2>
  </div>
  <!-- 
		声明式编程：在三大框架中更加流行
		  声明要显示的内容即可，内部Vue怎么处理的，我们不用管。
		  数据和界面完全分离：处理数据在data里面，处理界面的东西都在div里面处理。
	-->
  <div id="root">
    Vue实例会来管理：{{msg}}
    <!-- 方式一 -->
    <p>数组转换为字符串直接展示：{{movies}}</p>

    <!-- 方式二 -->
    <ul>
      <li>{{movies[0]}}</li>
      <li>{{movies[1]}}</li>
      <li>{{movies[2]}}</li>
    </ul><hr>

    <!-- 方式三 -->
    <!-- Angular里面叫repeat，Vue里面使用的是v-for -->
    <p v-for="item in movies">{{item}}</p><hr>
    <ul><li v-for="item in movies">{{item}}</li></ul><hr>
    <!-- 方式四 -->
    <ul>
      <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
    </ul>
  </div>

  <!-- 引入Vue之后，全局多了一个构造函数，所以需要new去调用这个构造函数 -->
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      // 对象的属性1：用于管理要挂载的元素,通过Vue来管理id为app的div
      el: '#root',
      // 对象的属性2：定义数据
      data: { // 定义数据，和Angular类似的语法
        msg: 'mustuche语法',
        age: 18,
        movies: [ '大话西游', '星际穿越', '少年派-奇幻漂流']
      }
    })
  </script>
</body>
<!-- 
  总结：
    修改data中的数据界面会随之发生改变：
    意味着如果当前这些数据不是写死的，是从服务器请求过来的。
 -->

</html>